<template>
<todoinput @add="addTodo"></todoinput>
<todolist :data="newData" @del="delTodo" @getFlag="handGetFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"></todolist>
</template>
<script setup>
import {ref} from "vue"
import todolist from "./todolist.vue"
import todoinput from "./todoinput.vue"
import { computed } from "@vue/reactivity";
let data=ref([
    {
        id:1,
        todo:'种地',
        isCompleted:false
    },
    {
        id:2,
        todo:'喂猪',
        isCompleted:true
    },
])
//添加事件
let addTodo=(input)=>{
    // console.log(input)
    let obj={
        id:Math.random().toString(32).substring(2),
        todo:input,
        isCompleted:false
    }
    data.value.push(obj)
}
//删除事件
let delTodo=(index)=>{
    data.value.splice(index,1)
}
//筛选
 
let allCount=ref()
let completedCount=ref()
let activeCount=ref()
let filterFlag=ref("all")
let handGetFlag=(flag)=>{
    filterFlag.value=flag
    
}

     let newData=computed(()=>{
        let all=data.value
        let completed=data.value.filter(item=>item.isCompleted)
        let active=data.value.filter(item=>!item.isCompleted)
        allCount.value=all.length
        completedCount.value=completed.length
        activeCount.value=active.length
        switch (filterFlag.value){
            case "all":
              return all
            case "completed":
              return completed
            case 'active':
              return active
        }
     })
    
</script>